import useForm from "@module/useForm";
import Input from "@ui/RJMart/input";
import Icon from "@ui/RJMart/icons";
import RobinFilter from "@module/RobinFilter";
import ZenModal from "@root/components/ZenUI/ZenModal/ZenModal";
import usePartState from "@module/usePartState";
import REST from "@module/Rest";

export default function StepOne() {
    const params = $state.params;
    const { registerType } = params || {};

    const [stateObj, updateState] = usePartState({});

    function doSubmit() {
        console.log(formData);

        if (!formData.account) {
            updateFormData({
                $$status: { account: "账号不能为空" }
            });
            return false;
        }

        let findWay, tips;
        if (formData.account.indexOf("@") > -1) {
            findWay = 2;
            tips = RobinFilter.emailValidate(formData.account);
        } else {
            findWay = 1;
            tips = RobinFilter.phoneValidate(formData.account);
        }

        if (tips) {
            // alert(tips);
            updateFormData({
                $$status: { account: tips }
            });
            return false;
        }

        const isValid = formData.$$valid && !tips;
        if (isValid) {
            if (findWay == 2) {
                //发送邮件，校验邮箱是否正确
                // ZenUI.SL(60);
                let sendUrl = "/store/api/user/buyer/ForgotPasswordByEmail";
                if (params.registerType == 2) {
                    sendUrl = "/suppliers/anon/ForgotPasswordByEmail";
                }
                let sendData = {
                    account: formData.account
                };
                REST.post(sendUrl, sendData, "dis").then(
                    function(data) {
                        // ZenUI.HL();
                        console.log(data);
                        if (data.code == "0000") {
                            doStepOne(findWay, formData.account);
                        } else {
                            // alert(data.message);
                            updateFormData({
                                $$status: { account: data.message }
                            });
                        }
                    },
                    function(error) {
                        // ZenUI.HL();
                        console.log(error);
                    }
                );
            } else {
                doStepOne(findWay, formData.account);
            }
        }
    }

    function doStepOne(findWay, account) {
        $state.go({
            stateName: "/forgetpwd",
            params: {
                step: 2,
                findWay: findWay,
                account: account,
                registerType: params.registerType,
                forgetPwd: 1
            }
        });
    }

    const {
        formData,
        handleChange,
        handleSubmit,
        updateFormData,
        validations,
        addValidate,
        addValidateMulti
    } = useForm(doSubmit, {}, "findPwdFormStep1");

    function beforeHandleChange(event) {
        handleChange(event);
    }

    return (
        <form
            className={"regi-content-form zen_p-b-80 zen_m-t-40"}
            name={"findPwdFormStep1"}
        >
            <InputItem
                name={"account"}
                title={"账号"}
                placeholder={"请输入手机号或邮箱"}
                handleChange={beforeHandleChange}
                formData={formData}
            />

            <NextStep formData={formData} doSubmit={doSubmit} />
        </form>
    );
}

function InputItem(props) {
    const { title, placeholder, index, handleChange, name } = props;
    let formData = props.formData;

    function addName() {
        let inputEle = document.querySelector(
            `.regi-inputs-input>div[name=${name}] input`
        );
        if (inputEle) {
            inputEle.setAttribute("name", name);
        }
    }

    React.useEffect(() => {
        addName();
    }, []);

    const isValid =
        formData.$$status.hasOwnProperty(name) && formData.$$status[name]
            ? false
            : true;

    return (
        <div className={"regi-content-inputs"}>
            <div
                className={
                    index == 3
                        ? "regi-content-label2-box"
                        : "regi-content-label-box"
                }
            >
                <span className={"regi-content-label"}>{title}</span>
            </div>
            <div className={"regi-inputs-input"}>
                <Input
                    name={name}
                    placeholder={placeholder}
                    onChange={handleChange}
                    error={!isValid}
                    statusIcon={
                        isValid ? null : (
                            <Icon
                                type="exclamation-circle-fill"
                                color="error"
                                width="18.26px"
                                height="18.26px"
                            />
                        )
                    }
                />

                {!isValid && (
                    <p className={"regi-content-error-tip"}>
                        {formData.$$status[name]}
                    </p>
                )}
            </div>
        </div>
    );
}

function NextStep(props) {
    const { doSubmit, formData } = props;
    const isValid = formData.$$valid;
    return (
        <div
            onClick={doSubmit}
            className={
                isValid ? "regi-content-next-step" : "regi-content-next-step1"
            }
        >
            <p>下一步</p>
        </div>
    );
}
